<template>
  <div class="row" id="translateForm">
    <div class="col-md-3"></div>
    <div class="col-md-6">
      <form id="transform" class="well form-inline" v-on:submit="formSubmit">
        <input class="form-control" type="text" v-model="textToForm" placeholder="input your content" name="">
        <select class="form-control" v-model="language">
          <option value="en" selected>English</option>
          <option value="ko">Korean</option>
          <option value="it">Italian</option>
          <option value="de">German</option>
          <option value="ja">Japanese</option>
        </select>
        <input class="btn btn-primary" type="submit" value="提交">
      </form>
    </div>
    <div class="col-md-3"></div>
  </div>
</template>
<script>
export default {
  name: 'translateForm',
  data: function() {
    return {
      textToForm: '',
      language: ''
    }
  },
  methods: {
    formSubmit: function(e) {
      e.preventDefault();
      // alert(this.textToForm);
      this.$emit('formData', this.textToForm, this.language);// 第一个参数为定义的方法，第二个参数为要传过去的值
    }
  },
  created: function() {
    this.language = 'en';
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
